<template>
	<view class="home-index">
		<!-- <match-media min-width="300" max-width="600">
          <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
        </match-media>
        <match-media min-width="600">
          <view>当页面宽度在 600 ~  之间时展示这里</view>
        </match-media> -->
		<div class="top-content">
			<view class="top-title" :style="{ height: navHeight + 'px' }">
				<img
					class="title-pic"
					:style="{ marginTop: customTop + 'px' }"
					src="@/static/title.png"
					alt=""
				/>
			</view>
			<div class="banner">
				<!-- 轮播图区域 -->
				<view class="uni-margin-wrap">
					<swiper
						class="swiper"
						circular
						:indicator-dots="indicatorDots"
						:indicator-active-color="indicatorActiveColor"
						:autoplay="autoplay"
						:interval="interval"
						:duration="duration"
					>
						<swiper-item v-for="(item, index) in bunners" :key="index">
							<view class="swiper-item" @click="jumpUrl(item, 'slideshow')">
								<button
									class="customer-service-btn swiper-btn"
									v-if="item.outerChainType == 6"
									type="default"
									show-message-card="true"
									open-type="contact"
								>
									<image class="pic" :src="item.imgUrl"></image>
								</button>
								<image v-else :src="item.imgUrl" mode="scaleToFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</div>
			<!-- 金刚区 -->
			<div class="menu-content">
				<div class="menu-list">
					<div
						class="menu-item"
						v-for="(item, index) in menus"
						:key="index"
						@click="jumpUrl(item, 'kong_region')"
					>
						<button
							class="customer-service-btn"
							v-if="item.outerChainType == 6"
							type="default"
							show-message-card="true"
							open-type="contact"
						>
							<image class="pic" :src="item.imgUrl"></image>
						</button>
						<image v-else class="pic" :src="item.imgUrl"></image>
						<!-- <image class="picText" :src="item.title"></image> -->
						<!-- <p class="text">{{ item.title }}</p> -->
					</div>
				</div>
			</div>
		</div>
		<base-common></base-common>
		<div class="content">
			<!-- 题目分类区 -->
			<div class="exam-blank" ref="dev">
				<div class="title-text">正版剑雅真题</div>
				<div class="list-box">
					<div class="class-list">
						<div
							class="class-item"
							v-for="item in topicTabs"
							:key="item.id"
							@click="handleClass(item.id)"
							:class="{ active: item.id === currentIndex }"
						>
							<div class="item-text">{{ item.title }}</div>
							<div v-if="item.id === currentIndex" class="blue-icon"></div>
						</div>
					</div>
					<div
						class="blank-list"
						:style="{
							borderTopLeftRadius: currentIndex == 1 ? 0 : '25rpx',
							borderTopRightRadius: currentIndex == 4 ? 0 : '25rpx'
						}"
					>
						<div
							class="item-blank"
							v-for="(item, index) in realTopicList"
							:key="index"
							@click="toPractice(item)"
						>
							<div
								class="item-pic"
								:style="{ backgroundImage: 'url(' + item.backgroundImg + ')' }"
							>
								<div class="tit">{{ item.subtitle }}</div>
							</div>
							<div class="item-text">
								<div class="test-title">{{ item.title }}</div>
								<div class="detail-link">查看详情</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<uni-popup ref="popRef" type="dialog">
			<uni-popup-dialog
				content="当前练习仅支持内部学员使用，如您是新东方学员，请绑定学员号后使用"
				okText="去绑定"
				title="温馨提示"
				@confirm="toBind"
			/>
		</uni-popup>

		<uni-popup
			class="popupClass"
			ref="popup"
			type="bottom"
			border-radius="10px 10px 0 0"
			background-color="#fff"
		>
			<view class="popTop" style="text-align: center; position: relative; height: 88rpx">
				<img
					src="@/static/images/img_top.png"
					style="width: 466rpx; height: 74rpx; margin: -20rpx auto 0"
					alt=""
				/>
				<view @click="closePopup" class="close">
					<img
						src="@/static/icon-close.png"
						style="width: 38rpx; height: 38rpx; display: block"
						alt=""
					/>
				</view>
			</view>
			<view class="list">
				<view v-for="item in frontListData" :key="item.id" class="list-item">
					<img
						:src="item.imgUrl"
						style="width: 49rpx; height: 51rpx; display: block"
						alt=""
					/>
					<text>{{ item.name }}</text>
					<view @click="toQRPage(item)" class="btn">免费领</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { apiGetBunner, apiAddHit, apiMaterialAddHit, buryingPoint } from '@/api/index/index.js'
import { apiGetSpecialStudentStatus, apiFrontList } from '@/api/exam/exam'
import UniPopup from '@/components/uni-popup/uni-popup.vue'
import UniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue'
export default {
	name: 'HomeIndex',
	components: {
		UniPopup,
		UniPopupDialog
	},
	data() {
		return {
			navHeight: this.CustomBar,
			customTop: this.Custom.top + this.Custom.height / 2,
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			indicatorActiveColor: '#ffffff',
			autoplay: true,
			interval: 2000,
			duration: 500,
			currentIndex: 1,
			bunners: [],
			menus: [],
			topicTabs: [
				// 真题分类tab
				{ title: '听力', id: 1 },
				{ title: '阅读', id: 2 },
				{ title: '写作', id: 3 },
				{ title: '口语', id: 4 }
			],
			topicListMap: {
				// 题型分类下的列表数据
				// 听力
				1: [
					{
						title: '顺序练习',
						subtitle: '剑雅听力',
						jumpUrl: '/pages/exam/listen?listenType=1',
						background: 'blue',
						clickType: 'listenSequentialPractice',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_red.png'
					},
					{
						title: '题型练习',
						subtitle: '剑雅听力',
						// jumpUrl: '/pages/exam/listenQuestionType',
						jumpUrl: '/pages/exam/listen?listenType=2',
						background: 'green',
						clickType: 'listenQuestionTypeExercises',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_blue.png'
					},
					{
						title: '场景练习',
						subtitle: '剑雅听力',
						// jumpUrl: '/pages/exam/listenScenario',
						jumpUrl: '/pages/exam/listen?listenType=3',
						background: 'green',
						clickType: 'listenScenePractice',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_yellow.png'
					},
					{
						title: '专项练习',
						subtitle: '剑雅听力',
						// jumpUrl: '/pages/exam/listenSpecial',
						jumpUrl: '/pages/exam/listen?listenType=4',
						background: 'green',
						clickType: 'listenSpecializedExercises',
						// handle: this.checkBind,
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_purple.png'
					}
				],
				// 阅读
				2: [
					{
						title: '顺序练习',
						subtitle: '剑雅阅读',
						jumpUrl: '/pages/exam/read?readType=1',
						background: 'blue',
						clickType: 'readSequentialPractice',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_red.png'
					},
					{
						title: '题型练习',
						subtitle: '剑雅阅读',
						jumpUrl: '/pages/exam/read?readType=2',
						background: 'green',
						clickType: 'readQuestionTypeExercises',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_blue.png'
					},
					{
						title: '场景练习',
						subtitle: '剑雅阅读',
						jumpUrl: '/pages/exam/read?readType=3',
						background: 'green',
						clickType: 'readScenePractice',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_yellow.png'
					}
				],
				// 写作
				3: [
					{
						title: '小作文',
						subtitle: '剑雅写作',
						jumpUrl: '/pages/exam/write?type=1',
						background: 'green',
						clickType: 'writeSmall',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_red.png'
					},
					{
						title: '大作文',
						subtitle: '剑雅写作',
						jumpUrl: '/pages/exam/write?type=2',
						background: 'blue',
						clickType: 'writeBig',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_blue.png'
					}
				],
				// 口语
				4: [
					{
						title: '最新题库',
						subtitle: '剑雅口语',
						jumpUrl: '/pages/exam/spoken',
						background: 'blue',
						clickType: 'spokenLatestQuestionBank',
						backgroundImg:
							'https://cdndoc.bj.xdf.cn/practice/ielts/static/img/blue/img_red.png'
					}
				]
			},
			delay: false, // 切换题型tab时列表显隐，做显示动画用
			frontListData: []
		}
	},
	onLoad(options) {
		this.getBunnerData()
		this.getMenuData()
		console.log('顶部高度', this.CustomBar)
		console.log('胶囊', this.customTop)
		wx.setBackgroundColor({
			backgroundColor: '#f5f7fa', // 窗口的背景色为白色
		})
	},
	computed: {
		realTopicList() {
			return this.topicListMap[this.currentIndex]
		}
	},
	mounted() {
		// 加载字体
		uni.loadFontFace({
			family: 'HYYaKuHeiJ',
			source: 'url("/static/fonts/HYYaKuHeiJ.ttf")',
			success: () => {
				console.log('HYYaKuHeiJ字体加载成功')
			},
			fail: (error) => {
				console.error('字体加载失败', error)
			}
		})
		uni.loadFontFace({
			family: 'FZLTHProGBK',
			source: 'url("/static/fonts/FZLTHProGBK.ttf")',
			success: () => {
				console.log('FZLTHProGBK字体加载成功')
			},
			fail: (error) => {
				console.error('字体加载失败', error)
			}
		})
	},
	methods: {
		closePopup() {
			this.$refs.popup.close()
		},
		// 领取资料弹窗
		getFrontList() {
			apiFrontList().then((res) => {
				console.log(res)
				this.frontListData = res.data
				this.$refs.popup.open()
			})
		},
		toQRPage(item) {
			this.addHit(item.id, 2)
			this.handleClick('data_collection', item.name)
			uni.navigateTo({
				url: `/pages/index/QRPage?qrCode=${item.qrCode}`
			})
		},
		// 专项练习校验学员号是否绑定
		async checkBind() {
			const { isBind, isValid } = await this.getUserInfo()
			if (!isBind) {
				return this.$refs.popRef.open()
			}
			if (!isValid) {
				return this.$tip.toast('专项练习仅针对在读学员使用哦～')
			}
			uni.navigateTo({
				url: '/pages/exam/listenSpecial'
			})
		},
		// 跳转绑定学员号页面
		toBind() {
			uni.navigateTo({
				url: '/pages/bindStudentCode/studentList'
			})
		},
		// 查学员号信息
		async getUserInfo() {
			return apiGetSpecialStudentStatus().then((res) => {
				if (res.code === 200) {
					return Promise.resolve(res.data)
				}
			})
		},
		// 获取bunner 和 金刚区
		getBunnerData() {
			apiGetBunner({ functionType: 1 }).then((res) => {
				this.bunners = res.data
			})
		},
		// 获取金刚区
		getMenuData() {
			apiGetBunner({ functionType: 2 }).then((res) => {
				this.menus = res.data
			})
		},
		handleClass(index) {
			this.currentIndex = index
			this.delay = true
			setTimeout(() => {
				this.delay = false
			}, 100)
		},
		/**
		 * 练习题跳转
		 */
		async toPractice(item) {
			this.handleClick(item.clickType)
			if (item.handle) {
				// 个别模块单独处理
				item.handle()
			} else {
				uni.navigateTo({
					url: item.jumpUrl
				})
			}
		},
		// 跳链接
		toLink(linkType, { outerChainUrl = '' }){
			if(outerChainUrl){
				const url = linkType == 'web' ? `/pages/exam/webView?src=${encodeURIComponent(outerChainUrl)}` : outerChainUrl
				uni.navigateTo({ url })
			}
		},
		// 跳小程序
		toMiniProgram({appid: appId = '', outerChainUrl: path = ''}){
			const options = {
				appId,
				path,
				complete(res){
					console.log(res)
				}
			}
			wx.navigateToMiniProgram(options)
		},
		// 跳转到对应页面
		jumpUrl(item, clickType) {
			this.addHit(item.id, 1)
			// 埋点
			const remark = item.title || item.imgUrl || ''
			this.handleClick(clickType, remark)
			const jumpMap = {
				1: () => this.toLink('web', item), // h5
				2: () => this.toLink('web', item), // 公众号
				3: () => this.toLink('inner', item), // 内部跳转
				4: () => this.toMiniProgram(item), // 跳小程序
				5: () => this.getFrontList(), // 资料领取
				6: () => null // 客服
			}
			jumpMap[item.outerChainType]()
		},
		// 埋点
		handleClick(type, remark = ''){
			buryingPoint({type, remark})
		},
		// 增加点击量
		addHit(id, type) {
			const api = type == 1 ? apiAddHit : apiMaterialAddHit
			api(id).then(() => {})
		},
	}
}
</script>
<style scoped lang="scss">
@function torem($rpx) {
	//$rpx为需要转换的字号
	@return #{$rpx * 100 / 750 / 4}rem;
}
.top-title {
	display: flex;
	justify-content: center;
	.title-pic {
		width: torem(265);
		height: torem(36);
		transform: translate(0, -50%);
	}
}
.home-index {
	width: 100%;
	min-height: 100vh;
	height: auto;
	background-color: #f5f7fa;
}
.top-content{
	background-image: url('https://cdndoc.bj.xdf.cn/practice/ielts/static/img/home_bg.png');
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: 100% torem(614);
}
.banner {
	padding: torem(42) torem(30) 0;
}
.uni-margin-wrap {
	width: torem(690);
	width: 100%;
}
.swiper {
	height: 245rpx;
	border-radius: torem(25);
}
.swiper-item {
	display: block;
	height: 245rpx;
	line-height: 245rpx;
	text-align: center;
	border-radius: torem(25);
	image {
		width: 100%;
		height: 100%;
		border-radius: torem(25);
	}
}
.swiper-btn {
	width: 100%;
	height: 100%;
	background-color: transparent;
}
.swiper-list {
	margin-top: torem(40);
	margin-bottom: 0;
}
.menu-content {
	margin-top: torem(35);
	padding: 0 torem(30) torem(24);
	.menu-list {
		display: flex;
		align-items: center;
		justify-content: space-around;
		.menu-item {
			width: 106rpx;
			text-align: center;
			.pic {
				width: 106rpx;
				height: 138rpx;
				display: block;
			}
			.picText {
				width: torem(103);
				height: torem(24);
			}
			.text {
				font-size: 0.8rem;
				font-weight: 400;
				color: #666666;
				line-height: torem(38);
				text-align: center;
			}
		}
	}
}

.exam-blank {
	min-height: calc(100vh - 750rpx);
	padding: torem(48) torem(30);
	background: #f5f7fa;
	.list-box {
		background: #ecf0ff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		border-radius: 25rpx;
	}
	.title-text {
		height: torem(36);
		font-size: torem(36);
		line-height: torem(33);
		font-family: FZLTHProGBK;
		font-weight: 600;
		color: #323232;
		margin-bottom: torem(34);
	}
	.class-list {
		height: torem(90);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: torem(28);

		position: relative;
		z-index: 2;
		border-radius: 25rpx 25rpx 0 0;
		overflow: hidden;
		.class-item {
			position: relative;
			flex: 1;
			height: torem(90);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.item-text {
				font-family: FZLTHProGBK-DB--GBK1-0;
				font-weight: 500;
				font-size: torem(30);
				color: #0b2b83;
			}

			.blue-icon {
				width: 50rpx;
				height: 5rpx;
				background: linear-gradient(-90deg, #3057e6 0%, #6496f6 100%);
				border-radius: 3rpx;
				margin-top: torem(10);
			}
		}
		.active {
			opacity: 1;
			background: #ffffff;
			border-radius: 25rpx 25rpx 0 0;
			box-shadow: 25rpx 25rpx 0 0 #ffffff, -25rpx 25rpx 0 0 #ffffff;
			color: #122d7e;

			.item-text {
				background: linear-gradient(to bottom, #6b9ef8, #2e55e5);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				font-weight: bold;
				font-size: torem(36);
				font-family: FZLTHProGBK-B--GBK1-0;
			}
		}
		.active::before {
			content: '';
			position: absolute;
			left: -25rpx;
			bottom: 0;
			width: 25rpx;
			height: torem(90);
			background: #ecf0ff; // 修改
			border-radius: 0 0 25rpx 0;
		}
		.active::after {
			content: '';
			position: absolute;
			right: -25rpx;
			bottom: 0;
			width: 25rpx;
			height: torem(90);
			background: #ecf0ff; // 修改
			border-radius: 0 0 0 25rpx;
		}
	}
}
.blank-list {
	// position: relative;
	// display: flex;
	// align-items: center;
	// justify-content: space-between;
	padding: 0 40rpx;
	padding-top: torem(8);
	right: -100%; /* 先将元素移出屏幕 */
	// animation: right-to-left 0.2s forwards; /* 播放动画 */
	// flex-wrap: wrap;
	background: #ffffff;
	border-radius: 25rpx;
	.item-blank {
		width: 100%;
		// height: 108rpx;
		// border-radius: torem(20);
		// display: inline-flex;
		// justify-content: center;
		// flex-direction: column;
		// margin-bottom: torem(15);
		display: flex;
		padding-bottom: 22rpx;
		padding-top: 22rpx;
		border-bottom: 1px solid #d9dbe4;
		&:last-child {
			border-bottom: 0;
		}
		.item-pic {
			width: 200rpx;
			height: 108rpx;
			background-size: cover;
			background-repeat: no-repeat;
			.tit {
				font-family: HYYaKuHeiJ;
				font-weight: bold;
				font-size: torem(20);
				color: #573837;
				line-height: 28rpx;
				font-style: italic;
				margin-top: 24rpx;
				margin-left: 18rpx;
			}
		}
		.test-title {
			font-size: torem(32);
			line-height: torem(33);
			padding-left: torem(30);
			font-family: FZLTHProGBK;
			font-weight: 600;
			color: #323232;
			padding-top: torem(10);
			padding-bottom: torem(10);
		}
		.detail-link {
			font-size: torem(25);
			line-height: torem(33);
			opacity: 0.6;
			padding-left: torem(30);
			font-family: FZLTHProGBK;
			font-weight: 500;
			color: #8a8a8a;
		}
	}
	.back-blue {
		background-color: #2eb3fe;
	}
	.back-green {
		background-color: #03cd8d;
	}
}

@keyframes right-to-left {
	100% {
		right: 0;
	}
}
.customer-service-btn {
	padding: 0;
	background-color: transparent;
}
.customer-service-btn::after {
	border: none;
}
::v-deep .popupClass {
	.popTop {
		.close {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			padding: 20rpx;
		}
	}
	.list {
		padding: 0 30rpx 25rpx;
		.list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx 0;
			text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 38rpx;
				padding-left: 22rpx;
				margin-right: auto;
			}
			.btn {
				width: 114rpx;
				height: 48rpx;
				background: linear-gradient(87deg, #7c6ef7 0%, #75a4ff 100%);
				border-radius: 24rpx;
				text-align: center;
				font-family: FZLANTY_XIK;
				font-weight: normal;
				font-size: 24rpx;
				color: #fefefe;
				line-height: 48rpx;
			}
		}
	}
}
</style>
